<template>
  <div class="transfer-popup" v-show="showTransfer">
    <div class="transfer-mask" @click="handleCancel"></div>
    <div class="transfer-content">
      <el-transfer
        :data="fruits"
        v-model="selectedFruitKeys"
        :titles="['可选水果', '已选水果']"
        :button-texts="['右移', '左移']"
        :render-content="renderFruit"
      ></el-transfer>
      <div class="transfer-buttons">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确定</el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { ElTransfer, ElButton } from "element-plus";

let showTransfer = ref(false);
const emits = defineEmits(["selectedItems", "showTransfer"]);

const fruits = ref([
  { key: 1, label: "苹果" },
  { key: 2, label: "香蕉" },
  { key: 3, label: "橙子" },
  { key: 4, label: "草莓" },
  { key: 5, label: "葡萄" },
]);
const selectedFruitKeys = ref([]);

const renderFruit = (h, option) => {
  return h("span", option.label);
};

const handleConfirm = () => {
  const selectedFruits = selectedFruitKeys.value.map((key) => {
    const fruit = fruits.value.find((f) => f.key === key);
    return fruit ? fruit.label : "";
  });
  emits("selectedItems", selectedFruits);
  emits("showTransfer", false);
};

const handleCancel = () => {
  emits("showTransfer", false);
  console.log("###########");
};
</script>

<style scoped>
.transfer-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.transfer-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.transfer-content {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.transfer-buttons {
  margin-top: 20px;
  text-align: right;
}
</style>
